<template>
  <echart :options="localChartOptions" :height="height" />
</template>
    
    <script>
import { Echart } from '@/components/Echart';
import { customApiExecute, modelApiExecute, localApiExecute, getParamsWithMerge } from '../../utils/common-methods';
import { useAnvilCodeStore } from '../../store/modules/code';

export default {
  name: 'BaseChart',
  components: { Echart },
  props: {
    height: {
      type: Number,
      default: undefined
    },
    chartOptions: {
      type: Object,
      default: () => {}
    },
    dicOption: {
      type: String,
      default: 'remote'
    },
    staticJson: {
      type: String,
      default: ''
    },
    dicRes: {
      type: String,
      default: ''
    },
    ajaxSetting: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localChartOptions: {}
    };
  },
  watch: {
    chartOptions: {
      handler(newVal) {
        this.localChartOptions = newVal;
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.asyncLoad();
  },
  methods: {
    asyncLoad() {
      this.getChartOptions();
    },
    getChartOptions() {
      try {
        if (this.dicOption == 'static') {
          this.localChartOptions.dataset.source = JSON.parse(this.staticJson);
        } else if (this.dicOption == 'remote' && this.ajaxSetting.url) {
          const { type, url, method, contentType, hookBefore, hookAfter, headers, params, noLoading } = this.ajaxSetting;

          const anvilCodeStore = useAnvilCodeStore();
          const { instance } = anvilCodeStore.getPageForm(this.$attrs.pageId);
          const callback = (response) => {
            let res = response;
            if (hookAfter) {
              console.log('调用后置钩子', hookAfter);
              // 获取当前表单实例
              res = instance[hookAfter](response);
            }
            let dicts = [];
            if (this.dicRes) {
              dicts = eval(this.dicRes);
            } else {
              dicts = res;
            }

            console.log('dicts', dicts);
            this.localChartOptions.dataset.source = dicts;
          };

          let Header = {},
            Param = {};

          if (headers) {
            headers.map((item) => {
              Header[item.key] = item.value;
            });
          }

          Param = getParamsWithMerge(this, params);

          if (hookBefore) {
            console.log('调用前置钩子', hookBefore);
            Param = instance[hookBefore](Param);
          }

          const config = {
            url,
            method,
            contentType,
            headers: Header,
            params: Param,
            callback
          };

          switch (type) {
            case 'ajax':
              return customApiExecute(config, { noLoading });
            case 'ajaxModel':
              return modelApiExecute(config, { noLoading });
            case 'ajaxLocal':
              return localApiExecute(config, { noLoading });
          }
        }
      } catch (e) {
        console.log('getChartOptions Error!', e);
      }
    }
  }
};
</script>  